<template>
  <a-drawer
    width="65%"
    :visible="show"
    :loading="loading"
    @close="show = false"
    :keyboard="false"
    destroy-on-close
  >
    <template slot="title">{{ $t('引用数据元') }}{{ targetList.length }} / {{ total }} </template>
    <a-row
      :gutter="[16, 16]"
      class="body_container"
    >
      <a-col :span="24">
        <a-input-search
          v-model="pager.name"
          @search="searchList"
          allow-clear
          :placeholder="$t('请输入搜索名称')"
        />
        &nbsp;
        <a-input-search
          v-model="pager.uid"
          @search="searchList"
          allow-clear
          :placeholder="$t('请输入搜索标识符')"
        />
      </a-col>
      <a-col :span="24">
        <div class="table_list">
          <vxe-table
            show-overflow
            show-header-overflow
            border
            resizable
            :loading="loading"
            :row-config="{ isHover: true }"
            :data="dataList"
            height="auto"
            ref="field_table"
            :keep-source="true"
            :edit-config="{
              trigger: 'click',
              mode: 'row',
              showIcon: false,
              showStatus: true,
            }"
            :checkbox-config="{
              checkField: 'checked',
              trigger: 'row',
            }"
            @checkbox-all="cellClickEvent"
            @checkbox-change="cellClickEvent"
          >
            <vxe-column
              type="checkbox"
              width="50"
              align="center"
            />
            <vxe-column
              type="seq"
              :title="$t('序号')"
              width="50"
              align="center"
            />
            <vxe-column
              field="uid"
              :title="$t('数据元标识符')"
            />
            <vxe-column
              field="name"
              :title="$t('数据元名称')"
            />
            <vxe-column
              field="description"
              :title="$t('描述')"
            />
            <vxe-column
              field="code"
              :title="$t('定义')"
            />
            <vxe-column
              field="title"
              :title="$t('操作')"
              width="90"
              align="center"
              fixed="right"
              v-if="radio"
            >
              <template #default="{ row }">
                <a-button
                  type="link"
                  @click="submit(row)"
                  >{{ $t('确定') }}</a-button
                >
              </template>
            </vxe-column>
            <template #empty>
              <a-empty
                :image-style="{
                  height: '80px',
                }"
              >
                <span slot="description">{{ $t('暂无数据') }}</span>
              </a-empty>
            </template>
          </vxe-table>
        </div>
        <vxe-pager
          background
          :current-page.sync="pager.pageNumber"
          :page-size.sync="pager.pageSize"
          :total="total"
          @page-change="getDataList"
          :layouts="['Total', 'PrevJump', 'JumpNumber', 'NextJump', 'FullJump']"
        >
        </vxe-pager>
      </a-col>
    </a-row>
    <div class="a_foot_nuttop">
      <a-space :size="12">
        <a-button @click="show = false">{{ $t('关闭') }}</a-button>
        <a-button
          type="primary"
          @click="submit"
          >{{ $t('保存') }}</a-button
        >
      </a-space>
    </div>
  </a-drawer>
</template>
<script>
  const $modelService = require('w-vue-chongqing/src/api/dataModel');
  export default {
    name: 'referenceDataElement',
    props: {
      value: {
        type: Boolean,
      },
      radio: {
        //选择方式，默认多选
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        loading: false,
        show: this.value,
        dataList: [], //数据元列表
        total: 0,
        pager: {
          parentId: undefined,
          pageNumber: 1,
          pageSize: 15,
          status: 1,
          categoryId: undefined,
          searchKey: undefined,
          name: undefined,
          uid: undefined,
        },
        targetList: [],
      };
    },
    methods: {
      /**
       * @Author: Jason Liu
       * @description: 确定事件
       */
      submit() {
        this.show = false;
        this.$emit('change', this.targetList);
      },
      /**
       * @Author: Jason Liu
       * @description: 查询数据
       */
      searchList() {
        this.pager.pageNumber = 1;
        this.getDataList();
      },
      /**
       * @Author: Jason Liu
       * @description: 查询数据元列表
       */
      getDataList() {
        this.loading = true;
        $modelService
          .getDataElementList(this.pager)
          .then((req) => {
            this.total = +req.data.totalElements;
            this.dataList = req.data.content.map((item) => {
              let index = this.targetList.findIndex((t) => {
                return t.id == item.id;
              });
              item.checked = index > -1;
              return item;
            });
          })
          .finally(() => {
            this.loading = false;
          });
      },
      /**
       * @Author: Jason Liu
       * @description: 点击选择
       */
      cellClickEvent({ row }) {
        this.dataList.forEach((item) => {
          let index = this.targetList.findIndex((t) => {
            return t.id == item.id;
          });
          if (item.checked) {
            if (index < 0) {
              this.targetList.push(item);
            }
          } else {
            if (index > -1) {
              this.targetList.splice(index, 1);
            }
          }
        });
      },
    },
    watch: {
      value(val) {
        this.show = val;
        if (val) {
          this.pager.name = undefined;
          this.pager.uid = undefined;
          this.targetList = [];
          this.searchList();
        }
      },
      show(val) {
        this.$emit('input', val);
      },
    },
  };
</script>
<style lang="less" scoped>
  .table_list {
    height: calc(100vh - 236px);
  }
</style>
